<template>
<u-form ref="uForm" label-width="140rpx" :model="form">
<view class="container-page">
	
	<scroll-view class="main" scroll-y enable-back-to-top scroll-with-animation @scrolltolower="scrolltolower">
		<view class="main pb32">
			<view class="p32">
				<radio-group @change="radioChange">
					<label class="t32"><radio :value="'0'" :checked="0 === current" style="transform:scale(0.7)"/>参展</label>
					<label class="ml48 t32"><radio :value="'1'" :checked="1 === current" style="transform:scale(0.7)"/>撤展</label>
				</radio-group>
			</view>
			<view class="box-container">
				<view class="label-title"><view class="icon"></view>{{lable1}}</view>
				<u-cell v-if="!defaultAddress" title="新增收货地址" size="large" isLink url="/pages/address/addSite"></u-cell>
				<u-cell v-else :title="defaultAddress.name + ' ' + defaultAddress.phone"
					:label="defaultAddress.provinceStr + defaultAddress.cityStr + defaultAddress.areaStr + defaultAddress.address"
					isLink size="large" url="/pages/address/index"></u-cell>
					
				<view class="label-title"><view class="icon"></view>{{lable2}}</view>
				<view class="ml48 mr48">
					<u-form-item label="姓名" prop="name" required>
						<u-input v-model="form.name" clearable placeholder="请输入您的姓名"></u-input>
					</u-form-item>
					
					<u-form-item label="电话" prop="phone" required>
						<u-input v-model="form.phone" clearable type="number" placeholder="请输入您手机号码"></u-input>
					</u-form-item>
<!-- 					<u-form-item label="省市" prop="areaDisplay" required>
						<u-cell style="width: 100%;" :title="form.areaDisplay ? form.areaDisplay : ''" required clickable isLink :border="false" @click="showRegion = true"></u-cell>
						<city-select v-model="showRegion" :area-code="areaCode" :level="addressLevel" @city-change="cityChange"></city-select>
					</u-form-item> -->
					<u-form-item label="展馆" prop="museum" required @click="showMuseum = true">
						<!-- <u-input v-model="form.museum" disabled disabledColor="#ffffff" placeholder="A馆" border="none" style="width: 100%;"></u-input><u-icon slot="right" name="arrow-right"></u-icon> -->
						<u-cell slot="right" v-model="form.museum" style="width: 100%;" required clickable isLink :border="false"></u-cell>
						<u-action-sheet
							:show="showMuseum"
							:actions="actions"
							title="请选择展馆"
							@close="showMuseum = false"
							@select="museumSelect" ></u-action-sheet>
					</u-form-item>
					
					<u-form-item label="展位" prop="address" required> <!-- label-position="top" -->
						<u-input v-model="form.address" type="textarea" :auto-height="true" clearable placeholder="请输入详细位置" />
					</u-form-item>
				</view>
			</view>
			<view class="box-container">
				<u-cell title="物品信息" :value="order.goodsName" isLink clickable url="/pages/order/goods"></u-cell>
				<u-cell title="增值服务" :value="form.valueadd" isLink clickable url="/pages/order/valueadd"></u-cell>
				<u-cell title="选择物流" :value="order.deliveryCompany" isLink clickable @click="showDelivery = true"></u-cell>
				<u-action-sheet
					:show="showDelivery"
					:actions="actionsDelivery"
					title="请选择物流"
					@close="showDelivery = false"
					@select="deliverySelect" ></u-action-sheet>
				<u-cell title="揽件时间" :value="form.timeStr" isLink @click="showDatetimePicker = true" :border="false"></u-cell>
				<TimePicker :show="showDatetimePicker" title="期望上门揽件时间" @close="showDatetimePicker = false" @select="datetimeSelect" closeOnClickOverlay @cancel="showDatetimePicker=false" ></TimePicker>
			</view>
			<view class="box-container">
				<view class="flex-between">
					<view class="t32 tbold">物品保险</view>
					<view class="t28">未报价物最高赔3倍运费</view>
				</view>
				<view class="flex p32 mt32 t32" style="background-color:#f4f4f5;border-radius:32rpx;" @click="tapSafe(1)">
					<view style="flex: 1;">价值500元及以下</view>
					<label class="c-error tbold" style="align-self: center;">￥1</label>
					<u-icon class="ml16" name="checkmark-circle-fill" :color="order.amountSafe==1?'#f00':'#ccc'" size="40rpx"></u-icon>
				</view>
				<view class="flex p32 mt32 t32" style="background-color:#f4f4f5;border-radius:32rpx;" @click="tapSafe(2)">
					<view style="flex: 1;">价值501元-1000元</view>
					<label class="c-error tbold" style="align-self: center;">￥2</label>
					<u-icon class="ml16" name="checkmark-circle-fill" :color="order.amountSafe==2?'#f00':'#ccc'" size="40rpx"></u-icon>
				</view>
				<view class="flex p32 mt32 t32" style="background-color:#f4f4f5;border-radius:32rpx;" @click="tapSafe(3)">
					<view style="flex: 1;">价值1000元以上</view>
					<label class="c-error tbold" style="align-self: center;">￥3</label>
					<u-icon class="ml16" name="checkmark-circle-fill" :color="order.amountSafe==3?'#f00':'#ccc'" size="40rpx"></u-icon>
				</view>
			</view>
			<view class="h100"></view>
		</view>
	</scroll-view>
	<u-line ></u-line>
	<view class="bottom">
		<view>
			<view class="t24 c-content">预估价:<text class="t32 c-error ml10">￥{{order.amountTotal}}</text>
			<!-- <view class="flex" @click="show=!show">
				<text class="t24 c-light ml24" style="padding-top: 3rpx;">查看明细</text>
				<u-icon :name="show?'arrow-down':'arrow-right'" color="#ccc" size="20rpx"></u-icon>
			</view> -->
			</view>
			<view>
				<label class="t24 c-content"><radio :value="'agree'" :checked="isAgree" style="transform:scale(0.6)" @click="isAgree=!isAgree" />阅读并同意<text @click="tapDzydqytk">《电子运单契约条款》</text></label>
			</view>
		</view>
		<view>
			<u-button type="error"  shape="circle" text="立即下单" @click="submit"></u-button>
		</view>
	</view>

	<!-- <TimePicker :visible.sync="showDatetimePicker" @selectTime="selectTime"/> -->
</view>
</u-form>

</template>

<script>

	const dayjs = require('dayjs')
	export default {
		show: false,
		data() {
			return {
				rules: {
					name: [{
						required: true,
						message: '请输入您的姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					phone: [{
						required: true,
						message: '请输入您手机号码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					museum: [{
						required: true,
						message: '请输入您手机号码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				},
				form: {
					name: '',
					phone: '',
					provinceStr: '广东省',
					cityStr: '广州市',
					museum: '',
					address: '',
					timeStr: '',
					valueadd: ''
				},
				lable1: "寄",
				lable2: "收",
				current: 0,
				r1: true,
				r2: false,
				showRegion: false,
				showMuseum: false,
				actions: [],
				showDelivery: false,
				actionsDelivery: [],
				isAgree: false,
				defaultAddress: undefined,
				showDatetimePicker: false,
				datetimePickerVal: Number(new Date()),
				minDate: Number(new Date()),
				maxDate: Number(new Date()) + 3600000*24*30, // 30天
				order: {
					"userId": 1,
					"orderType": 21,
					"payType": 1,
					"goodsWeight": 100,
					"goodsVolume": 1,
					"goodsNumber": 1,
					"deleteStatus": 0,
					"confirmStatus": 0,
					"amountGoods": 102,
					"amountSafe": 0,
					"amountTotal": 102,
					"status": 0
				}
			}
		},
		created() {

		},
		mounted() {
			
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
			
			uni.$on('carry_goods', (bean) => {
				this.order.goodsName=bean.name
				this.order.goodsWeight=bean.weight
				this.order.goodsVolume=bean.volume
				this.order.goodsNumber=bean.number
				this.order.remark=bean.remark
				this.calcTotal()
			})
			uni.$on('carry_valueadd', (bean) => {
				let value=''
				if(bean.wooden.value){
					this.form.packWooden=bean.wooden
					this.order.packWooden=JSON.stringify(bean.wooden)
					value+=bean.wooden.name+' '
				}
				if(bean.carton.value){
					this.form.packCarton=bean.carton
					this.order.packCarton=JSON.stringify(bean.carton)
					value+=bean.carton.name+' '
				}
				this.form.valueadd=value
				this.calcTotal()
			})
		},
		onLoad() {

		},
		onShow() {
			this._defaultAddress()
			this._reqConfig()
			this._reqConfigDelivery()
		},
		methods: {
			calcTotal() {
				this.order.amountGoods=this.order.goodsWeight*1+this.order.goodsVolume*1+this.order.goodsNumber*1
				var price=0
				if(this.form.packWooden){
					price+=this.form.packWooden.value.price
				}
				if(this.form.packCarton){
					for (var i = 0; i < this.form.packCarton.value.length; i++) {
						price+=this.form.packCarton.value[i].price*this.form.packCarton.value[i].count
					}
				}
				this.order.amountPack=price
				this.order.amountTotal=this.order.amountGoods+this.order.amountPack+this.order.amountSafe
			},
			tapDzydqytk() {
				uni.navigateTo({
					url: "/pages/article/index?key=dzydqytk"
				})
			},
			tapSafe(amount) {
				if(amount==this.order.amountSafe){
					this.order.amountSafe=0 //取消选中
				}else{
					this.order.amountSafe=amount
				}
				this.calcTotal()
			},
			radioChange(evt) {
				this.lable1=(evt.detail.value=='0')?"寄":"收"
				this.lable2=(evt.detail.value=='1')?"寄":"收"
				this.order.orderType=(evt.detail.value=='0')?21:22
			},
			museumSelect(e) {
				this.form.museum = e.name
				if(this.order.orderType==11){
					this.order.receiverRegion=e.name
				}else{
					this.order.senderRegion=e.name
				}
			},
			deliverySelect(e) {
				this.order.deliveryCompany = e.name
			},
			cityChange(e) {
				this.form.provinceId = e.province.value
				this.form.cityId = e.city.value
				this.form.areaId = e.area.value
				this.form.provinceStr = e.province.label
				this.form.cityStr = e.city.label
				this.form.areaStr = e.area.label
				if (this.addressLevel == 4) {
					this.form.streetId = e.street.value
					this.form.streetStr = e.street.label
					this.form.areaDisplay = e.province.label + e.city.label + e.area.label + e.street.label
				} else {
					this.form.areaDisplay = e.province.label + e.city.label + e.area.label
				}
			},
			async _defaultAddress() {
				// https://www.yuque.com/apifm/nu0f75/udrcag
				const res = await this.$wxapi.defaultAddress(this.token,getApp().globalData.userId)
				if (res.code == 0) {
					this.defaultAddress = res.data
				}
			},
			async _reqConfig() {
				// https://www.yuque.com/apifm/nu0f75/udrcag
				const res = await this.$wxapi.config(this.token,'museum')
				if (res.code == 0) {
					const arr=res.data.value.split(",");
					for (let index = 0; index < arr.length; index++) {
						this.actions.push({name:arr[index]})
					}
				}
			},
			async _reqConfigDelivery() {			
				const res = await this.$wxapi.config(this.token,'delivery')
				if (res.code == 0) {
					const arr=res.data.value.split(",");
					for (let index = 0; index < arr.length; index++) {
						this.actionsDelivery.push({name:arr[index]})
					}
				}
			},
			datetimeSelect(date,time) {
				this.showDatetimePicker = false
				this.order.time =  date.date_en + ' ' + time //dayjs(e.value).format("YYYYMMDDHmm")
				this.form.timeStr =  date.date_zh + ' ' + time
			},
			selectTag(index) {
				const item = this.tags[index]
				item.select = !item.select
				this.tags.splice(index, 1, item)
			},
			submit() {
				if(!this.isAgree){
					uni.$u.toast('请先阅读并同意')
					return
				}
				this.$refs.uForm.validate().then(res => {
					this._submit()
				}).catch(errors => {
					uni.$u.toast('信息未填写完整')
				})
			},
			async _submit() {
				this.order.userId=getApp().globalData.userId
				if(this.order.orderType==21){
					this.order.senderName=this.defaultAddress.name
					this.order.senderPhone=this.defaultAddress.phone
					this.order.senderProvince=this.defaultAddress.provinceStr
					this.order.senderCity=this.defaultAddress.cityStr
					this.order.senderRegion=this.defaultAddress.areaStr
					this.order.senderDetailAddress=this.defaultAddress.address
					
					this.order.receiverName=this.form.name
					this.order.receiverPhone=this.form.phone
					this.order.receiverProvince=this.form.provinceStr
					this.order.receiverCity=this.form.cityStr
					this.order.receiverRegion=this.form.museum
					this.order.receiverDetailAddress=this.form.address
				}else{
					this.order.receiverName=this.defaultAddress.name
					this.order.receiverPhone=this.defaultAddress.phone
					this.order.receiverProvince=this.defaultAddress.provinceStr
					this.order.receiverCity=this.defaultAddress.cityStr
					this.order.receiverRegion=this.defaultAddress.areaStr
					this.order.receiverDetailAddress=this.defaultAddress.address
					
					this.order.senderName=this.form.name
					this.order.senderPhone=this.form.phone
					this.order.senderProvince=this.form.provinceStr
					this.order.senderCity=this.form.cityStr
					this.order.senderRegion=this.form.museum
					this.order.senderDetailAddress=this.form.address
				}
				const res = await this.$wxapi.addOrder(this.token,this.order)
				if (res.code != 0) {
					uni.$u.toast(res.msg)
					return
				}
				uni.redirectTo({
					url: '/pages/order/success?id='+res.data[0]
				})
			},
			
		}
	}
</script>
<style scoped lang="scss">
	.container-page {
		width: 100vw;
		height: calc(100vh - var(--window-bottom) - var(--status-bar-height) - var(--window-top));
		overflow: hidden;
		display: flex;
		flex-direction: column;
	
		.main {
			flex: 1;
			overflow: hidden;
		}
		.bottom {
			padding: 32rpx 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left {
				width: 70%;
			}
		}

	}
	.box-container {
		width: 686rpx;
		margin-left: 32rpx;
		margin-top: 32rpx;
		border-radius: 16rpx;
		box-shadow: 2rpx 2rpx 8px #ddd;
		background-color: #fff;
		padding: 32rpx 32rpx;
		box-sizing: border-box;
		.list-item{
		  position: relative;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  height: 120rpx;
		  .text-list {
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		  }
		}
		.title {
			font-size: 38rpx;
			font-weight: bold;
			font-style: italic;
			padding-bottom: 32rpx;
		}
	}

	
	.number {
		display: flex;
		flex-direction: row-reverse;
	}
	.tags {
		display: flex;
		flex-wrap: wrap;
		.item {
			margin: 32rpx 32rpx 0 0;
		}
	}
	.remark {
		margin-top: 64rpx;
	}
</style>